<template>
  <div>
    <my-header backBtn>
      <div slot="title">
        书包定位
      </div>
      <div v-show="pertype" slot="right"  @click="bobynews">
        宝宝信息
      </div>
    </my-header>
    <baidu-map class="bm-view"
               :style="'height:'+height+'px' "
               :zoom="zoom"
               :center="center"
               @ready="handlerMap"
               :scroll-wheel-zoom="true"
               ak="wpjzuT9FyGlqzF9ZeolLwmWZXRz2XZst">
      <bm-marker :top="true"
                 :icon="icon"
                 :position="center"
                 animation="BMAP_ANIMATION_BOUNCE">

      </bm-marker>
      <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> -->
      <bm-control :offset="{height:20,width:30}"  class="r-control" >
        <div class="dianchi">
          <img src="@/../static/img/power-100.png" class="power-img" v-if="power===10">
          <img src="@/../static/img/power-70.png" class="power-img" v-else-if="power>=7">
          <img src="@/../static/img/power-50.png" class="power-img" v-else-if="power>=5">
          <img src="@/../static/img/power-30.png" class="power-img" v-else-if="power>=3">
          <img src="@/../static/img/power-20.png" class="power-img" v-else-if="power>=2">
          <img src="@/../static/img/power-5.png" class="power-img" v-if="power<=0.5">
          <div v-if="power<=0" class="p-0">{{power*10}}%</div>
          <div v-else-if="power<10" class="p-0">{{power*10}}%</div>
          <div v-if="power===10" class="p-1">100%</div>
        </div>

      </bm-control>

      <bm-control :offset="{height:20,width:30}"  class="r-control2" >

        <div class="dianchi2">
           <div class="mm-control" @click="jiaZoom">＋</div>
           <div  class="mm-control" @click="jianZoom">－</div>
           <!--<button @click="addZoom(3)">缩放至最小</button>
           <button @click="addZoom(19)">缩放至最大</button>
           <button @click="addZoom(10)">还原</button>-->

        </div>
      </bm-control>


    </baidu-map>
    <!-- 底部菜单-->
    <div style="width: 100%;text-align: left;">
      <div style="width: 100%;text-align: left;">
        <div style="padding: 10px;line-height: 30px;">
            <div class="db_inline">
              <div><img src="@/../static/img/location.png" style="width: 20px">{{address.name}}
              </div>
              <div>定位时间：{{address.locationTime}}</div>
            </div>
          </div>
          <div style="float: right;margin-top: -60px;margin-right: 20px" @click="freshLocationFn">
            <img src="@/../static/img/fresh.png">
          </div>
        </div>
    </div>
    <div style="width: 100%;" class="foot-container">
      <div class="foot-childDiv" @click="guiji">
        <img src="@/../static/img/gps-gj.png" class="foot-img" />
        <div>轨迹查询</div>
      </div>
      <div class="foot-childDiv" @click="anquan" style="">
        <img src="@/../static/img/gps-aq.png" class="foot-img" />
        <div>安全围栏</div>
      </div>
      <div class="foot-childDiv" @click="baojing">
        <img src="@/../static/img/gps-sos.png" class="foot-img" />
        <div>SOS报警</div>
        <div v-if="sosNum>0" class="sos-num">{{sosNum}}</div>
      </div>
    </div>


  </div>

</template>
<script>
  import {BaiduMap, BmMarker, BmControl} from 'vue-baidu-map'
  import wx from "weixin-js-sdk";
  import Axios from 'axios/index'
  import Cookies from 'js-cookie';

  export default {
    components: {
      BaiduMap,
      BmMarker,
      BmControl
    },
    prop: {
      height: {
        type: String,
        default: '300'
      }
    },
    data() {
      return {
        pertype:true,
        zoom: 19,
        s_name:'',
        s_avatar:'',
        icon:'',
        showDetail: false,
        height: document.body.clientHeight - 200,
        width: document.body.clientWidth,
        center: {lng: 0, lat: 0},
        map: null,
        BMap: null,
        path: [],
        power: -1,
        sosNum: 10,
        domain: '',
        student: {
          id: '',
          lat: 0,
          lng: 0,
          power: -1,
          locationTime:'',
          name:'',
          avatar:''
        },
        ws: null,
        address: {
          name: '',
          locationTime: '',
          studentName: '',
          studentId: '',
          lng: '',
          lat: '',
          power: ''
        }
      }
    },
    methods: {
      guiji(){
        let data={
          id:this.student.id,
          lng:this.address.lng,
          lat:this.address.lat
        }
        this.$router.push({
          path:'/GpsGuiji',
          query:data
        })
      },
      anquan(){
        let data={
          id:this.student.id,
          lng:this.address.lng,
          lat:this.address.lat,
          icon:this.icon,
          //type:'bind'
          type:'check',
        }
        this.$router.push({
          path:'/GpsAQ',
          query:data
        })
      },
      baojing(){
        let data={
          id:this.student.id,
          lng:this.address.lng,
          lat:this.address.lat,
          name:this.s_name,
          url:this.student.avatar
        }
        this.$router.push({
          path:'/GpsSos',
          query:data
        })
      },
      handlerMap({BMap, map}) {
        this.map = map;
        this.BMap = BMap;
        this.center = this.student;
        this.addControl();
        this.$nextTick(() => {
          this.handlerAddress();
        })
      },
      addControl(){
        // 添加比例尺控件
        let scaleCtrl = new BMap.ScaleControl();
        // 添加比例尺控件
        this.map.addControl(scaleCtrl);
      },
      addZoom (level) {
        this.zoom = level
      },
      jianZoom(){
        if(this.zoom <= 3){
          this.zoom = 3
        } else {
          this.zoom = this.zoom - 1;
        }
      },
      jiaZoom(){
        if(this.zoom >= 19){
          this.zoom = 19
        } else {
          this.zoom = this.zoom + 1;
        }

      },
      localCenterFn(address) {
        this.center = {lng: address.lng, lat: address.lat};
        this.power = address.power;
      },
      handlerAddress() {
        let student = this.student;
        let myGeo = new BMap.Geocoder({extensions_town: true});
        let that = this;
        myGeo.getLocation(new BMap.Point(student.lng, student.lat), function (result) {
          if (result) {
            let address = result.address;
            Object.assign(that.address, {
              name: address,
              locationTime: student.locationTime,
              studentName: student.name,
              studentId: student.id,
              lng: student.lng,
              lat: student.lat,
              power: student.power
            })
          }
        });
      },
      freshLocationFn() {
        this.$toast.show('查询中...', 'loading');
        this.$http.freshStudentLocation({studentId: this.student.id}).then(resp => {
          let _this = this;
          let serverUrl = Axios.defaults.baseURL;
          let target = new RegExp('http', 'g');
          serverUrl = serverUrl.replace(target, 'ws');
          let token = Cookies.get('token');
          let ws = this.ws = new WebSocket(serverUrl + '/ws/gps/' + token);

          ws.onmessage = evt => {
            let location = JSON.parse(JSON.parse(evt.data));
            _this.center = location;
            _this.student.lng = location.lng;
            _this.student.lat = location.lat;
            _this.ws.close();
          }
          _this.$toast.hide();
        })
      },
      fentchSosNum(){
        this.$http.fetchGpsSosNum(this.student.id).then(resp => {
          let data = resp.data;
          this.sosNum = data;

        }).catch(resp => {
          this.sosNum = 0;
        })
      },
      bobynews(){
        this.$router.push({
          path:'/per-baby',
          query: {studentId:this.student.id}
        })
      },
      selectBobynew(bid){
        //获取图片地址头
        this.$http.getCosCredential().then(resp => {
          this.domain = resp.data.domain;
          this.$http.fetchPersonalnoe({id:bid}).then(res=>{
            this.icon = {url:resp.data.domain+res.data.avatar,size:{height:40,width: 40},opts: {imageSize: {height:40,width: 40}}};
          });
        });

      }
    },
    mounted() {
      let data = this.$route.query;
      if (!data.lat){
        this.$weui.topTips('无定位数据');
      }
      //this.pertype = data.pertype;
      this.student = data;
      this.s_name = data.name;
      this.power = data.power;
      //获取头像
      this.selectBobynew(data.id);
      //this.icon ={url:data.avatar,size:{height:60,width: 60},opts: {anchor: {width: 27, height:13}}};
      //this.icon ={url:data.avatar,size:{height:60,width: 60},opts: {imageSize: {height:60,width: 60}}};
      //this.$weui.topTips(data.avatar);
      this.fentchSosNum();
    },
    created() {
    }
  }
</script>
<style scoped>
  .bm-view {
    width: 100%;
    height: 300px;
  }

  .power-img {
    width: 15px;
    height: 25px
  }
  .r-control{
    margin-left: 80%;
  }
  .r-control2{
    margin-left: 80%;
    margin-top: 80%;
  }
  .dianchi{
    font-size: 10px;
    margin: 5px;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fff;
    border:0px solid;
    border-radius:20px;
    text-align: center;
  }

  .dianchi2{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    background: #fff;
    border:0px solid;
    border-radius:20px;
    text-align: center;
  }
  .p-0{
    margin-top: 8px;
    color: #ef5e63;
  }
  .p-1{
    margin-top: 8px;
    color: #36c12d;
  }
  .mm-control{
    font-size: 25px;
  }
  .foot-container{
    display: flex;
  }
  .foot-childDiv{
    flex: 1;
    font-size: 12px;
  }
  .foot-img{
    width: 40px;
  }
  .sos-num{
    margin-right: 20px;
    float: right;
    width: 15px;
    color: #fff;
    font-size: 10px;
    margin-top: -65px;
    padding: 2px;
    background: #ef5e63;
    border:0px solid;
    border-radius:20px;
    text-align: center;
  }

</style>
